<div class="ama-studio-project-header">
    <ng-container *ngIf="project$ | async as project;">
        <div class="ama-studio-project-header-navigation">
            <button mat-icon-button aria-label="Back arrow" (click)="onBackArrowClick()" data-automation-id="studio-header-dashboard-button">
                <mat-icon>arrow_back</mat-icon>
            </button>
            <button mat-icon-button aria-label="Hide left sidenav" data-automation-id="studio-header-toggle-left-sidenav"
                (click)="onToggleLeftSideNav()">
                <i class="material-icons-outlined">space_dashboard</i>
            </button>
            <div>
                <modelingsdk-prefer-project-button [projectId]="project.id" [isPreferred]="project.favorite">
                </modelingsdk-prefer-project-button>
            </div>
        </div>

        <div class="ama-studio-project-header-menu">
            <button mat-button [matMenuTriggerFor]="belowMenu">{{project.name}}
                <span class="material-icons">
                    expand_more
                </span>
            </button>
            <mat-menu #belowMenu="matMenu" yPosition="below">
                <button mat-menu-item (click)="downloadProject(project)">{{'SDK.PROJECT_HEADER.DOWNLOAD' | translate }}</button>
                <button mat-menu-item (click)="saveAsProject(project)"
                    [attr.data-automation-id]="'project-save-as-' + project.id" [attr.aria-label]="'SDK.PROJECT_HEADER.SAVE_AS_ICON' | translate">
                    {{'SDK.PROJECT_HEADER.SAVE_AS' | translate }}
                </button>
                <button mat-menu-item (click)="openLogHistory()"
                    [attr.data-automation-id]="'project-log-history' + project.id" [attr.aria-label]="'APP.MENU.LOG_HISTORY' | translate">
                    {{'APP.MENU.LOG_HISTORY' | translate }}
                </button>
                <button mat-menu-item *ngFor="let button of buttons"
                [attr.data-automation-id]="'project-' + button.automationId"
                (click)="handleClick(button.actionClass, project.id)">
                    {{ button.title | translate }}
                </button>
                <span class="ama-studio-project-header-menu-version">{{'SDK.PROJECT_HEADER.VERSION' | translate }} {{project.version}}</span>
            </mat-menu>
        </div>

        <div class="ama-studio-project-header-action">
            <modelingsdk-project-collaborators [projectId]="project.id" [overlapCollaborators]=true></modelingsdk-project-collaborators>
            <button mat-icon-button
                aria-label="Add Collaborators"
                data-automation-id="studio-header-add-collaborators"
                class="ama-studio-project-header-add-collaborators"
                (click)="onAddCollaborators(project.id)">
                <mat-icon class="material-icons-outlined">person_add</mat-icon>
            </button>
            <adf-notification-history menuPositionX="before" menuPositionY="above"></adf-notification-history>
            <modelingsdk-user-info-menu class="ama-studio-project-header-user-info"></modelingsdk-user-info-menu>
            <button mat-flat-button class="ama-studio-project-header-action-validate" (click)="onValidateProject(project.id)">
                {{'SDK.PROJECT_HEADER.VALIDATE' | translate }}
            </button>
            <button mat-flat-button *ngFor="let button of headerButtons"
                    class="ama-studio-project-header-action-release" onclick="this.blur()" (click)="handleClick(button.actionClass, project.id, button.title)">
                {{'SDK.PROJECT_HEADER.RELEASE' | translate }}
            </button>
        </div>
    </ng-container>
</div>
